<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <div class="table-operator">
                        <a-button type="primary" @click="handBatApprove"  ><a-icon type="check-square" />{{i18n('list.batchApply','批量审批')}}</a-button>
                    </div>
                    <span class="search-btn-box" v-if="!isheader">
                        <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>
                        {{$ti18('rxList.leachBtn','过滤')}}</span>
                    </span>
                </div>
                <div btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel"
                     @close="closeSearchbar">
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.heading','事项标题')">
                                    <a-input :placeholder="i18n('form.heading','事项标题','input')" v-model="queryParam['Q_v.SUBJECT__S_LK']"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.numberOrder','单号')">
                                    <a-input :placeholder="i18n('form.numberOrder','单号','input')"v-model="queryParam['Q_v.BILL_NO__S_LK']"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.formData','表单数据')">
                                    <a-input :placeholder="i18n('form.formData','表单数据','input')"v-model="queryParam['Q_v.FIELD_JSON__S_LK']"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.process','审批环节')">
                                    <a-input :placeholder="i18n('form.process','审批环节','input')" v-model="queryParam['Q_v.NAME__S_LK']"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan" v-if="isheader">
                    <span class="table-page-search-submitButtons">
                        <a-button type="primary" icon="search" @click="search">
                            {{$ti18('rxList.searchBtn','查询')}}
                        </a-button>
                        <a-button style="margin-left: 4px" @click="cancel">
                            {{$ti18('rxList.resetBtn','重置')}}
                        </a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                          {{ advanced ? i18n('list.putAwayBtn','收起') : i18n('list.expansionBtn','展开') }}
                          <a-icon :type="advanced ? 'up' : 'down'"/>
                        </a>
                    </span>
                            </a-col>
                            <template v-if="advanced">
                                <a-col :span="colSpan">
                                    <a-form-item :label="i18n('form.timeFrom','创建时间 从')">
                                        <a-date-picker
                                            style="width: 100%"
                                            :placeholder="i18n('form.createTime','请输入任务创建时间')"
                                            v-model="queryParam['Q_v.CREATE_TIME__D_GE']"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="colSpan">
                                    <a-form-item :label="i18n('form.to','至')">
                                        <a-date-picker
                                            style="width: 100%"
                                            :placeholder="i18n('form.createTime','请输入任务创建时间')"
                                            v-model="queryParam['Q_v.CREATE_TIME__D_LE']"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"
                                        />
                                    </a-form-item>
                                </a-col>


                            </template>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    :url="url"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="taskId"
                    :loadDataOnstart="true"
                    @selectChange="onSelectChange"
                >
                  <span slot="status" slot-scope="{ text, record, index }">
                    <a-tag v-if="record.status == 'UNHANDLE'" color="red">
                        {{i18n('form.toBeDone','待办')}}
                    </a-tag>
                    <a-tag v-else-if="record.status == 'HANDLE'" color="green">
                        {{i18n('form.processing','处理中')}}
                    </a-tag>
                  </span>
                    <span slot="assignee" slot-scope="{ text, record }">
                        <span>
                            <a-tag v-for="taskExe in record.taskExecutors"><a-icon :type="taskExe.type"></a-icon>&nbsp;{{ taskExe.name }}</a-tag>
                        </span>
                    </span>
                    <span slot="action" slot-scope="{ text, record }">
                        <a @click="handleTask(record)">{{i18n('list.handle','办理')}}</a>
                    </span>
                    <span :slot="field.value+'formJson'" slot-scope="{ text, record }" v-for="(field,index) in taskFields">
                        <span>{{getLabel(record,field)}}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>


<script>
import {AppBaseList, RxLayout, RxFit, RxGrid,Util} from '@lowcode/jpaas-common-lib'
import RxCategoryTreeeditor from '@/components/redxun/rx-category-treeeditor'
import TaskBatApprove from "./TaskBatApprove";
import BpmDefApi from "@/api/bpm/core/bpmDef";
import FlowUtil from "../js/FlowUtil";

export default {
    name: 'BpmTaskList',
    mixins: [AppBaseList,FlowUtil],
    components: {
        RxLayout,
        RxFit,
        RxGrid,
        RxCategoryTreeeditor,
        TaskBatApprove
    },
    data() {
        return {
            //展示默认的列头
            isDefColumn: true,
            taskFields:[],
            treeData: [],
            selTreeId: '',
            gridData: [],
            //流程定义KEY
            defKey:"",
            url:"",
            // 查询参数
            queryParam: {},
            //默认表头
            defColumns:[{
                title: this.$ti18('rxList.index','序号'),
                type: 'indexColumn',
                dataIndex: 'serial',
                scopedSlots: {customRender: 'serial'},
                width: 40,
            },
                {
                    title: this.i18n('form.itemTitle','事项标题'),
                    dataIndex: 'subject',
                    width: 180,
                    ellipsis: false,
                },
                {
                    title:this.i18n('form.billNo','单号'),
                    dataIndex: 'billNo',
                    width: 100,
                },
                ],
            // 表头
            columns: [],
            afterColumns:[
                {
                    title: this.i18n('form.process','审批环节'),
                    dataIndex: 'name',
                    width: 100,
                },
                {
                    title: this.i18n('form.time','创建时间'),
                    dataIndex: 'createTime',
                    width: 120,
                },
                {
                title:  this.$ti18('rxList.action','操作'),
                dataIndex: 'action',
                width: 100,
                scopedSlots: {customRender: 'action'},
            }],

            selectedRowKeys: [],
            selectedRows: [],
        }
    },
    created() {
        this.initParams();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "MyTaskByDefKey", key);
        },
        initParams() {
            var params = {};
            if (this.$route.meta.params) {
                params = JSON.parse(this.$route.meta.params);
            } else {
                params = this.$route.params;
            }
            this.defKey = params.defKey;
            if (params.defColumn != undefined && params.defColumn ) {
                this.columns.push(...this.defColumns);
            }
            if(params.defKey){
                this.getBpmDef(params.defKey);
            }else {
                this.columns.push(this.actionColumn);
            }
            this.url="/api-bpm/bpm/core/bpmTask/myTasksByDefKey?defKey=" + this.defKey;
        },
        toggleAdvanced() {
            this.advanced = !this.advanced
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        handleTask(record) {
            this.openInst(record.appId,record.instId,record.taskId);
        },
        resetSearch() {
            this.queryParam = {}
            this.$nextTick(() => {
                this.queryParam = {};
                let appId=this.curApp.appId;
                if(this.hasAppId && appId){
                    this.queryParam.Q_APP_ID__S_EQ=appId;
                }
                this.$refs[this.table].loadData();
            })
        },
        toggleSearch() {
            this.showSearch = !this.showSearch
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false;
        },
        getBpmDef(defKey) {
            BpmDefApi.getBydefKey(defKey).then(res => {
                    var taskFields = JSON.parse(res.extConfs).Process.taskFields;
                    if (!taskFields) {
                        this.columns.push(...this.afterColumns);
                        return;
                    }
                    for (let i = 0; i < taskFields.fields.length; i++) {
                        var field = taskFields.fields[i];
                        this.taskFields.push(field);
                        this.columns.push({
                            title: field.label,
                            dataIndex: field.value+'formJson',
                            width: 120,
                            scopedSlots: {customRender: field.value+'formJson'},
                        })
                    }
                    this.columns.push(...this.afterColumns);

            });
        },
        getLabel(record,field){
            if(record.formJson){
                var formJson=JSON.parse(record.formJson);
                for (let i = 0; i < formJson.length; i++) {
                    if(formJson[i].label==field.label){
                        return formJson[i].val;
                    }
                }
            }
            return "";
        },
        handBatApprove(){
            var rows=this.$refs.table.getSelectedRows();
            if(!rows || rows.length==0){
                this.$notification.warning({
                    message: this.$ti18('rxMsa.tipsInfo','提示信息'),
                    description:
                        this.i18n('list.batchSelectTips','请选择需要审批的任务!'),
                });
                return;
            }
            var taskAry=rows.map(item=>{
                return item.taskId;
            });
            let self_ = this;
            Util.open(
                {
                    component: TaskBatApprove,
                    curVm: this,
                    // widthHeight:['1000px','600px'],
                    max:true,
                    title:  this.i18n('list.pageTitle','任务批量审批'),
                    data: {
                        taskIds: taskAry.join(",")
                    },
                    cancel:function (){
                        self_.refreshGrid();
                    }

                },
                function (action) {
                    self_.refreshGrid();
                }
            )
        },
    }
}
</script>
<style scoped>

</style>

